Skip to main content

Code Styling

Kita harus membuat kode kita agar bersih dan mudah untuk dibaca.

Code Styling merupakan sebuah seni pemograman yang harus dimiliki seorang programer dalam pembuatan aplikasi yang kompleks maupun berskala kecil. Karena Code Styling sangat membantu untuk dapat dibaca lagi oleh manusia atau programmer lainya.

Disini ada beberapah hal yang harus diperhatikan bagi seorang programmer dalam penulisan code, diantaranya:

Curly Braces (Kurung Kurawal)​

Dalam penulisan Curly Braces (Kurung Kurawal) pastikan kurung kurawal pembuka satu baris dengan kata kunci terkait, bukan pada baris baru, dan juga harus dikasih spasi sebelum bracket pembuka.

untuk lebih jelasnya dibawah ini ada beberapa sample mengenai penulisan Curly Braces (Kurung Kurawal) yang benar dan kurang tepat dalam Code Styling :

Buruk

if (n < 0) { function('DO THIS');}

Buruk

if (n < 0)
  function('DO THIS');

Buruk

if (n < 0) function('DO THIS');

Baik

if (n < 0) {
  function('DO THIS');
}

Untuk kode satu baris diperbolehkan, jika if (condition) mengembalikan nilai nol.

if (n < 0) return null;

Line Length (Panjang Baris)​

Tidak ada orang yang suka membaca code memanjang secara horizontal, pastikan split code menjadi beberapa baris. Berikut contohnya:

Buruk

let str = `Komerce Siap Membantu Pebisnis Online dan UMKM Dalam Meningkatkan Penjualan. Hire talent tanpa ribet dan bisa monitoring kinerja secara remote hanya dengan satu aplikasi. Rasakan berbagai kemudahan dari Komerce. Lebih hemat waktu dan biaya hingga jutaan rupiah!`;

Baik

let str = `Komerce Siap Membantu Pebisnis Online dan UMKM Dalam Meningkatkan
Penjualan. Hire talent tanpa ribet dan bisa monitoring kinerja secara
remote hanya dengan satu aplikasi. Rasakan berbagai kemudahan dari
Komerce. Lebih hemat waktu dan biaya hingga jutaan rupiah!`;

jika kita menggunakan if (condition),

Buruk

if ( payment_method === 'COD' && expedisi === 'ID_EXPRESS' && jenis_ekspedisi === 'REGULAR') {
  // YOUR LOGIC
}

Baik

if (
    payment_method === 'COD' &&
    expedisi === 'ID_EXPRESS' &&
    jenis_ekspedisi === 'REGULAR'
  ) {
  // YOUR LOGIC
}

Indent (Indentasi)​

ada 2 untuk indentasi pengkodean:

1. Indentasi Horizontal: 2 or 4 spasi.​

submitOrder(id_product,
     payment_method, // 5 spaces padding at the left
     expedisi,
     customer,
     address
  ) {
  // ...
}

2. Indentasi Vertikal: baris kosong (1 spasi) sebelum penulisan kode baru.​

function totalPrice(cart) {
  let totalPrice = 1;
  //              <-- HERE
  for (let i = 0; i < cart.length; i++) {
    totalPrice *= cart[i].price;
  }
  //              <-- HERE 
  return totalPrice;
}

Semicolons (;)​

Titik koma harus ada setelah setiap pernyataan, bahkan jika itu mungkin bisa dilewati.

let totalPrice = 1; // <-- THIS

Nesting Levels​

Cobalah untuk menghindari kode bersarang terlalu banyak level.

Misalnya, dalam looping, terkadang ada baiknya untuk menggunakan continue untuk menghindari Nesting Levels

contoh penambahan nested di if, seperti dibawah ini :

for (let i = 0; i < cart.length; i++) {
  if (cond) {
    ... // <- NESTING LEVELS
  }
}

kita dapat menulis, seperti ini :

for (let i = 0; i < cart.length; i++) {
  if (!cond) continue;
  ...  // <- NO NESTING LEVELS
}

Hal serupa dapat dilakukan dengan if/else dan return

Misalnya, dua construct di bawah ini identik.

Construct 1

function sumTotalPrice(cart, role) {
  if (role != 'mitra') {
    alert("Role tidak di izinkan");
    // Akan Lanjut ke proses selanjutnya
  }

  let totalPrice = 1;

  for (let i = 0; i < cart.length; i++) {
    totalPrice *= cart[i].price;
  }

  return totalPrice;
}

Construct 2

function sumTotalPrice(cart, role) {
  if (role != 'mitra') {
    alert("Role tidak di izinkan");
    return;  // Akan Berhenti
  }

  let totalPrice = 1;

  for (let i = 0; i < cart.length; i++) {
    totalPrice *= cart[i].price;
  }

  return totalPrice;
}

Constructor Yang kedua lebih mudah dibaca karena special case dari role != 'mitra' ditangani sejak dini. Setelah pemeriksaan selesai, kita dapat melanjutkan ke aliran kode utama tanpa perlu membuat nesting levels tambahan.

Function Placement (Penempatan Function)​

Jika Anda menulis beberapa fungsi "helper" dan kode yang menggunakannya, ada beberapa cara untuk mengatur function tersebut.

1. Pendeklarasian Function di atas​

// Pendeklarasian Fungsi
function getCart() {
  // YOUR CODE
}

function sumTotalPrice(cart) {
  // YOUR CODE
}

function addTransaction() {
  // YOUR CODE
}

// Pemakaian Function
let cart = getCart();
sumTotalPrice(cart);
addTransaction();

2. Pendeklarasian Function di bawah​


// Pemakaian Function
let cart = getCart();
sumTotalPrice(cart);
addTransaction();

// Pendeklarasian Fungsi
function getCart() {
  // YOUR CODE
}

function sumTotalPrice(cart) {
  // YOUR CODE
}

function addTransaction() {
  // YOUR CODE
}

3. Pendeklarasian Function di lain file (Jika dipake lebih dari satu)​

dateFormat.js
export const dateFormat(date){
  // YOUR CODE
}
main.js
import dateFormat from './dateFormat.js';

const date = new Date();

//Pemanggilan Fungsi
dateFormat(date);

4. Pendeklarasian dengan cara di mix​

//Fungsi 1
let cart = getCart();
function getCart() {
  // YOUR CODE
}

// Fungsi 2
sumTotalPrice(cart);
function sumTotalPrice(cart) {
  // YOUR CODE
}

// Fungsi 3
addTransaction();
function addTransaction() {
  // YOUR CODE
}

Style Guides​

Kamu bisa menggunakan Style Guides diantaranya yang popular adalah:

Automated Linters​

Kamu bisa menggunakan Automated Linters untuk merapikan kode dan memberi suggestion secara otomatis.

beberapa tools yang bisa kamu pake:

cara penginstallan eslint sebagai berikut:

  1. Install Node.js
  2. Instal ESLint dengan menggunakan command npm install -g eslint
  3. Buat file bernama .eslintrc di folder root project
  4. instal plugin di code editor anda seperti ESLint by microsoft di VSCODE
.eslintrc
{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "no-console": 0,
    "indent": 2
  }
}

Example Case​

function example(x,n)
{
  let result=1;
  for(let i=0;i<n;i++) {result*=x;}
  return result;
}

let x=prompt("x?",''), n=prompt("n?",'')
if (n<=0)
{
  alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
}
else
{
  alert(example(x,n))
}